﻿/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
    background-color: white;
    font: 15px/20px 'Segoe UI',Tahoma,Helvetica, Arial,sans-serif;
    color: #253340;
    margin: 0;
    padding: 0;    
}

.container {
    text-align: left;
    width: 100%;
    zoom: 1;
}

#header {
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    padding-bottom: 15px !ie7;
}


#top-header {
    background-color: #F0F1F4;
    height: 40px;
    margin-bottom: -35px;
    color:#6A747E;
    border-bottom:3px solid #3E6D8E;
}

.headerRight
{
    float:right;
}

.headerLeft
{
    float:left;
}

#content {
margin: 0 auto;
width: 1200px;
min-height: 510px;
}

#footer 
{
margin: 0 auto;
color: #6A747E;
background: #F0F1F4;
clear: both;
padding: 15px;
margin-top: 20px;
border-top:3px solid #3E6D8E;
text-align:center;
}

#logindisplay a, #footer a {
    color: #317ae5;
    text-decoration: none;
    border-bottom: 0;
}

#logindisplay a:hover, #footer a:hover {    
    border-bottom: 1px #5C87B2 dotted;
}

.loginMessages {
    margin: 20px;
    width: 100%;
    float: left;
}

.metroLogin
{
    border-bottom: solid 3px #9090F0;
    background:#f0f1f5;
    float:left;
    margin:20px;
    padding:20px;
    width:35%;
    min-height:315px;
    
}

.metroRegister
{
    border-bottom: solid 3px #9090F0;
    background:#f0f1f5;
    float:right;
    margin:20px;
    padding:20px;
    width:35%;
    min-height:300px;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu {
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
}

ul#menu li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: #fff;
    text-decoration: none;
}

ul#menu li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a {
    background-color: #fff;
    color: #000;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

input[type="text"], 
input[type="password"] {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
}

select {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
}

input[type="submit"] {
    
}

.loginInputs {
    font-size: 1.2em;
padding: 10px;
background-color: #707070;
color: white;
border: 0;
cursor: pointer;
}

input[type="submit"] :hover{
    
    background-color: red;
}

/* TABLE
----------------------------------------------------------*/

table {
    border: solid 1px #e8eef4;
    border-collapse: collapse;
}

table td {
    padding: 5px;
    border: solid 1px #e8eef4;
}

table th {
    padding: 6px 5px;
    text-align: left;
    background-color: #e8eef4;
    border: solid 1px #e8eef4;
}

/* MISC  
----------------------------------------------------------*/
.clear {
    clear: both;
}

.error {
    color: Red;
}

nav, 
#menucontainer {
    margin-top: 40px;
}

div#title {
    display: block;
    float: left;
    text-align: left;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label {
    margin: 1em 0 0 0;
}

.display-field, 
.editor-field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

.text-box.multi-line {
    height: 6.5em;
}

/* Styles for Dashboard
----------------------------------------------------------*/
.metroDivs {
    margin-right: 10px;
    margin-bottom: 10px;
    padding-top: 80px;
    padding-bottom: 80px;
    width: 30%;
    float: left;
    background-color: #F0F1F4;
    cursor: pointer;
    font-size: 22px;
    text-align: center;
    vertical-align: middle;
    border-top: 3px solid #9090F0;
}

.metroDivs:hover 
{
    background-color: #B0B1B4;
    /*border: 3px solid #a6e2a6;*/
}

.mainBlock {
    width: 100%;
    background-color: #F0F1F4;
}

.leftDashboard {
    width: 70%;
    float: left;
}

.rightDashboard {
    width: 25%;
    float: right;
    /*text-align: center;       */
}

.showBlock {
    padding: 10px;
    background-color: #F0F1F4;
    margin-bottom: 20px;
}

.taskBlock {
    padding: 10px;
    margin-bottom: 20px;
    min-height: 400px;
}

.categoryBlock 
{
    /*padding: 10px;*/
    /*background-color: #F0F1F4;*/
    margin-bottom: 20px;
    min-height: 400px;
}

.dateBlock {
    padding: 10px;
    background-color: #F0F1F4;
    margin-bottom: 20px;
}

.newDialogBox {
    /*background: #253340;*/
    background-color: #777;
    color: white;
    text-decoration: none;
    padding: 5px 11px 5px 11px;
    margin-right: 20px;
    font-weight: bold;
    cursor: pointer;
    float: left;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 3px solid #DDDDDD;	
}

.newDialogBox a {
    color: white;
    text-decoration: none;
}

.newDialogBox:hover {
    border-bottom: 3px solid #FF9C08;
}

.miniBar {
    width: 100%;
    float: none;
    margin-bottom: 20px;
}

.createNewBar {
    font-size: 16px;       
}

.addButton {
    font-size: 14px;
    font-weight: bold;
    background-color: #777;
    color: white;
    text-decoration: none;
    padding: 7px 7px 6px 7px;
}

.AddDialogBox {
    background-color: #777;
    color: white;
    text-decoration: none;
    padding: 5px 11px 5px 11px;
    font-weight: bold;
    cursor: pointer;
    float: left;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 3px solid #DDDDDD;
    margin-right: 10px;
}

.AddDialogBox:hover {
    border-bottom: 3px solid #FF9C08;
}

.AddDialogBox a {
    color: white;
    text-decoration: none;
}

.tags {
    text-decoration: none;
    padding: 20px;
    border-color: #DDDDDD #777777 #444444 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    text-decoration: none;
    padding: 20px;
    margin: 10px;
    cursor: pointer;
}

.tags:hover {
    background-color: #DED;
}

.tags a
{
    color: #777777;
    margin-left: 10px;
    text-decoration: none;
    vertical-align: top;
    
}

.tags a:hover
{
    text-decoration: none; 
/*    border-bottom: 2px solid #FF9C08;    */
}

.tasks {
    background-color: white;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    border-top: 1px solid #E0EAF1;
    border-left: 1px solid #E0EAF1;
    color: black;
    float: left;
    height: 100%;
    margin: 5px 0 5px 5px;
    padding:20px;    
    text-decoration: none;
    width: 100%;
}

/*
.tasks:hover {
    background-color: #DED;
}
*/
/*
.tasks:hover div 
{    
    display: block;
}*/

.loading {
    height: 100%;
    position: relative;
    text-align: center;
    top: 150px;
    width: 100%;
}

.doneBtn 
{
    display: block;
    cursor: pointer;
    /*background: url('./Images/Task/done2.png') no-repeat;*/
    float: left;
}

.editBtn 
{
     display: block;
    cursor: pointer;
    /*background: url('./Images/Task/edit.png') no-repeat;*/
    float: left;
}

.deleteBtn 
{
    display: block;
    cursor: pointer;
    /*background: url('./Images/Task/delete.png') no-repeat;*/
    float: left; 
}

.doneBtn, .editBtn, .deleteBtn, .reopenBtn, .dateBtn {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    padding: 3px 4px 3px 4px;
    margin: 2px 5px 2px 5px;
    text-decoration: none;
    font-size: 90%;
    white-space: nowrap;
}

.doneBtn:hover, .editBtn:hover, .deleteBtn:hover, .reopenBtn:hover, .dateBtn:hover {
    background-color: #3E6D8E;
    color: white;
}

.dateBtn
{
color: #6F6F6F;
background-color: #E7E7E7;
border-bottom: 1px solid #626262;
border-right: 1px solid #979797;
padding: 3px 4px 3px 4px;
    margin: 2px 5px 2px 5px;
    text-decoration: none;
    font-size: 90%;
    white-space: nowrap;
}

.dateBtn:hover {
    color: #E7E7E7;
background-color:#6F6F6F ;
}

.reopenBtn, .dateBtn {
    cursor: pointer;
    float: left;
}

.sbuttons {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    padding: 3px 4px 3px 4px;
    margin: 2px 5px 2px 0px;
    text-decoration: none;
    font-size: 90%;
    white-space: nowrap;
}

.sbuttons:hover {
    background-color: #3E6D8E;
    color: white;
    cursor: pointer;
}

.dateLabel {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial;
}